<template>
  <div class="order">
    <div class="height">
      <i class="el-icon-arrow-left" @click="goBack"></i>
      <span style="margin: 0 auto;">我的订单</span>
    </div>
    <div class="addressBox" v-for="(item,index) in orderList" :key="index">
      <div class="infoBox">
        <div class="nameAndPhone">
          <span>{{item.address}}</span>
          <span>{{item.name}}</span>
          <span>{{item.phone}}</span>
        </div>
        <div class="mailCompany">
          <span style="color: red;">{{item.amount}}元</span>
          <span>{{item.mailCompany}}</span>
        </div>
        <div class="addressText">
          <i class="el-icon-time" style="color: #409EFF"></i>
          {{item.receiveDate}}
        </div>
      </div>
      <div class="operation">
        <el-button v-if="item.status == 'save'"  size='small'  type="danger" @click='prepayment(item.id)'>未支付</el-button>
        <el-tag v-if="item.status == 'doing'" type="success" plain>接单中</el-tag>
        <el-tag v-if="item.status == 'accept'"  type="success" plain>已接单</el-tag>
        <el-button v-if="item.status == 'receive'"  size='small'  type="danger" @click='confirm(item.id)'>确认收货</el-button>
        <el-tag v-if="item.status == 'success'" type="info" plain>已收货</el-tag>
      </div>
    </div>
    <div style="padding: 20px;text-align: center;color: #C0C4CC" v-if="orderList.length == 0">
      暂无数据
    </div>
  </div>
</template>

<script>
export default {
  name: 'order',
  data () {
    return {
      orderList:[],
      getBrandWCPayRequest: {},
      orderId: ''
    }
  },
  computed:{
    token() {
      return this.$store.state.app.token
    },
    userId() {
      return this.$store.state.app.userId
    },
  },
  mounted(){
    this.obtainOrderList();
  },
  methods:{
    goBack(){
      this.$router.push('/personal');
    },
    obtainOrderList(){
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
        });
        this.axios({
            method: 'post',
            url: '/app/campus/mailDemand/list4useId',
            headers: {'userId': this.userId,'token': this.token},
            data: {
              pageNo: 1,
              pageSize: 10,
            }
        }).then(res =>{
            // console.log(res.data);
            this.orderList = res.data.data;
            
            loading.close();
        })
    },
    confirm(id){
        this.axios({
            method: 'post',
            url: '/app/campus/mailDemand/submit',
            headers: {'userId': this.userId,'token': this.token},
            data: {
              id: id,
            }
        }).then(res =>{
            // console.log(res.data);
            if(res.data.message.code == 200){
              this.$message({
                message: '确认收货成功',
                type: 'success'
              });
              this.obtainOrderList();
            }
        })
    },
    // 公众号预支付接口
    prepayment(id){
      this.orderId = id
      this.axios({
          method: 'post',
          url: '/app/app/weixin/weixinApiPay',
          headers: {'userId': this.userId,'token': this.token},
          data: {
          'orderId': id
        }
      }).then(res =>{
          // console.log(res.data);
        this.getBrandWCPayRequest = res.data.data;
          this.pay();
      })
    },
    pay(){
      if (typeof WeixinJSBridge == "undefined"){
        if( document.addEventListener ){
          document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false);
        }else if (document.attachEvent){
          document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady); 
          document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady);
        }
      }else{
        this.onBridgeReady();
      }
    },
    onBridgeReady(){
      
      let data = this.getBrandWCPayRequest;
      WeixinJSBridge.invoke(
        'getBrandWCPayRequest', {
        "appId": data.appId,     //公众号名称，由商户传入     
        "timeStamp": data.timeStamp,         //时间戳，自1970年以来的秒数     
        "nonceStr": data.nonceStr, //随机串     
        "package": data.package,     
        "signType":"MD5",         //微信签名方式：     
        "paySign": data.paySign //微信签名 
        },
        function(res){
        if(res.err_msg == "get_brand_wcpay_request:ok" ){
        // 使用以上方式判断前端返回,微信团队郑重提示：
          //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
          this.weixinCallBack()
        } 
      }); 
    },
    weixinCallBack(){
      this.axios({
          method: 'post',
          url: '/app/app/weixin/callBack',
          headers: {'userId': this.userId,'token': this.token},
          data: {
          'orderId': this.orderId
        }
      }).then(res =>{
              this.obtainOrderList();
      })
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.height{
  background: #fcd927;height: 42px;font-size: 16px;line-height: 42px;text-align: center;color: #fff;padding: 0 8px;display: flex;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);margin-bottom: 3px;
}
.height i{line-height: 42px;font-size: 18px;}
.addressBox{box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);background: #fff;margin-bottom: 3px;display: flex;padding-bottom: 10px;justify-content: space-between;}
.nameAndPhone{display: flex;justify-content: space-between;padding: 12px 20px 3px;font-size: 15px;font-weight: bold;}
.mailCompany{display: flex;justify-content: space-between;padding: 3px 20px;font-size: 15px;font-weight: bold;}
.addressText{text-align: left;padding: 3px 20px;font-size: 15px;}
.infoBox{flex-grow: 1;}
.operation{width: 83px;display: flex;align-items: flex-end;flex-shrink: 0;flex-grow: 0;padding-right: 3px;}
/* border-bottom: 1px dotted #ccc */
</style>
